<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧社区管理系统 - 报修维护</title>
    <!-- 引入 FontAwesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <!-- 引入 Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2980b9;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #34495e;
            --text-color: #333;
            --border-color: #ddd;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Noto Sans SC', Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: #f5f7fa;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 15px 0;
            text-align: center;
            box-shadow: var(--shadow);
            position: relative;
            z-index: 100;
        }
        
        .header h1 {
            font-weight: 500;
            margin: 0;
            font-size: 1.8rem;
        }
        
        /* 导航栏样式 */
        .nav {
            background-color: white;
            padding: 0;
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 99;
        }
        
        .nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }
        
        .nav ul li {
            position: relative;
        }
        
        .nav ul li a {
            text-decoration: none;
            color: var(--dark-color);
            padding: 15px 25px;
            display: block;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .nav ul li a:hover,
        .nav ul li a.active {
            color: var(--primary-color);
            background-color: rgba(52, 152, 219, 0.1);
        }
        
        .nav ul li a.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--primary-color);
        }
        
        /* 主内容区样式 */
        .main-content {
            display: flex;
            margin-top: 20px;
        }
        
        .sidebar {
            width: 250px;
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 15px;
            margin-right: 20px;
            height: fit-content;
        }
        
        .sidebar h3 {
            color: var(--dark-color);
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .sidebar-menu {
            list-style: none;
        }
        
        .sidebar-menu li {
            margin-bottom: 5px;
        }
        
        .sidebar-menu a {
            display: block;
            padding: 10px;
            color: var(--text-color);
            text-decoration: none;
            border-radius: 4px;
            transition: var(--transition);
        }
        
        .sidebar-menu a:hover,
        .sidebar-menu a.active {
            background-color: rgba(52, 152, 219, 0.1);
            color: var(--primary-color);
        }
        
        .sidebar-menu i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        
        .content {
            flex: 1;
        }
        
        /* 卡片样式 */
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .card-header h2 {
            color: var(--dark-color);
            font-size: 1.4rem;
            margin: 0;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark-color);
        }
        
        .form-control {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 1rem;
            transition: var(--transition);
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }
        
        textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }
        
        select.form-control {
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 1em;
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            text-align: center;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--secondary-color);
        }
        
        .btn-success {
            background-color: var(--success-color);
            color: white;
        }
        
        .btn-success:hover {
            background-color: #27ae60;
        }
        
        .btn-warning {
            background-color: var(--warning-color);
            color: white;
        }
        
        .btn-warning:hover {
            background-color: #e67e22;
        }
        
        .btn-danger {
            background-color: var(--danger-color);
            color: white;
        }
        
        .btn-danger:hover {
            background-color: #c0392b;
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-color);
        }
        
        .btn-outline:hover {
            background-color: var(--light-color);
        }
        
        .btn-sm {
            padding: 5px 10px;
            font-size: 0.875rem;
        }
        
        .btn-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn-icon i {
            margin-right: 5px;
        }
        
        /* 表格样式 */
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        .table th,
        .table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        
        .table th {
            background-color: var(--light-color);
            color: var(--dark-color);
            font-weight: 500;
        }
        
        .table tr:hover {
            background-color: rgba(52, 152, 219, 0.05);
        }
        
        .table .actions {
            white-space: nowrap;
        }
        
        /* 状态标签 */
        .badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .badge-primary {
            background-color: rgba(52, 152, 219, 0.1);
            color: var(--primary-color);
        }
        
        .badge-success {
            background-color: rgba(46, 204, 113, 0.1);
            color: var(--success-color);
        }
        
        .badge-warning {
            background-color: rgba(243, 156, 18, 0.1);
            color: var(--warning-color);
        }
        
        .badge-danger {
            background-color: rgba(231, 76, 60, 0.1);
            color: var(--danger-color);
        }
        
        /* 仪表盘统计卡片 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 20px;
            display: flex;
            align-items: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }
        
        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 1.5rem;
            color: white;
        }
        
        .stat-icon.primary {
            background-color: var(--primary-color);
        }
        
        .stat-icon.success {
            background-color: var(--success-color);
        }
        
        .stat-icon.warning {
            background-color: var(--warning-color);
        }
        
        .stat-icon.danger {
            background-color: var(--danger-color);
        }
        
        .stat-info h3 {
            font-size: 1.8rem;
            margin: 0;
            color: var(--dark-color);
        }
        
        .stat-info p {
            margin: 5px 0 0;
            color: #777;
        }
        
        /* 移动端模拟 */
        .mobile-preview {
            width: 320px;
            border: 12px solid #222;
            border-radius: 30px;
            padding: 15px;
            background-color: #f5f5f5;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            margin: 0 auto;
        }
        
        .mobile-header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 15px;
            border-radius: 10px 10px 0 0;
            text-align: center;
            margin-bottom: 15px;
        }
        
        .mobile-nav {
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            background-color: white;
            border-radius: 0 0 10px 10px;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
        }
        
        .mobile-nav-item {
            text-align: center;
            color: #777;
            font-size: 0.8rem;
        }
        
        .mobile-nav-item.active {
            color: var(--primary-color);
        }
        
        .mobile-nav-item i {
            display: block;
            font-size: 1.2rem;
            margin-bottom: 5px;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .main-content {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                margin-right: 0;
                margin-bottom: 20px;
            }
            
            .nav ul {
                flex-wrap: wrap;
            }
            
            .nav ul li {
                margin-bottom: 5px;
            }
        }
        
        @media (max-width: 768px) {
            .stats-container {
                grid-template-columns: 1fr 1fr;
            }
            
            .mobile-preview {
                width: 280px;
            }
        }
        
        @media (max-width: 576px) {
            .stats-container {
                grid-template-columns: 1fr;
            }
            
            .nav ul li a {
                padding: 10px 15px;
                font-size: 0.9rem;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade {
            animation: fadeIn 0.5s ease forwards;
        }
        
        /* 选项卡样式 */
        .tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 20px;
        }
        
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: var(--transition);
        }
        
        .tab:hover {
            color: var(--primary-color);
        }
        
        .tab.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
            font-weight: 500;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* 报修详情 */
        .repair-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .detail-card {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
        }
        
        .detail-card h3 {
            margin-bottom: 10px;
            color: var(--dark-color);
            font-size: 1.1rem;
            padding-bottom: 5px;
            border-bottom: 1px dashed var(--border-color);
        }
        
        .detail-item {
            display: flex;
            margin-bottom: 8px;
        }
        
        .detail-label {
            font-weight: 500;
            min-width: 100px;
            color: #666;
        }
        
        .detail-value {
            flex: 1;
        }
        
        /* 进度条样式 */
        .progress-container {
            margin: 20px 0;
        }
        
        .progress-steps {
            display: flex;
            justify-content: space-between;
            position: relative;
            margin-bottom: 30px;
        }
        
        .progress-steps:before {
            content: '';
            position: absolute;
            top: 12px;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: #e0e0e0;
            z-index: 1;
        }
        
        .progress-bar {
            position: absolute;
            top: 12px;
            left: 0;
            height: 4px;
            background-color: var(--primary-color);
            z-index: 2;
            transition: width 0.5s ease;
        }
        
        .step {
            position: relative;
            z-index: 3;
            text-align: center;
            width: 25%;
        }
        
        .step-icon {
            width: 28px;
            height: 28px;
            background-color: #e0e0e0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            color: white;
            font-size: 14px;
            transition: var(--transition);
        }
        
        .step.active .step-icon {
            background-color: var(--primary-color);
        }
        
        .step.completed .step-icon {
            background-color: var(--success-color);
        }
        
        .step-label {
            font-size: 0.85rem;
            color: #777;
        }
        
        .step.active .step-label {
            color: var(--primary-color);
            font-weight: 500;
        }
        
        /* 图片预览 */
        .image-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        
        .image-item {
            width: 80px;
            height: 80px;
            border-radius: 4px;
            overflow: hidden;
            position: relative;
        }
        
        .image-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 操作记录 */
        .timeline {
            position: relative;
            padding-left: 30px;
            margin-top: 20px;
        }
        
        .timeline:before {
            content: '';
            position: absolute;
            left: 10px;
            top: 0;
            height: 100%;
            width: 2px;
            background-color: var(--border-color);
        }
        
        .timeline-item {
            position: relative;
            margin-bottom: 20px;
        }
        
        .timeline-item:before {
            content: '';
            position: absolute;
            left: -23px;
            top: 5px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: var(--primary-color);
        }
        
        .timeline-content {
            background-color: #f9f9f9;
            border-radius: 6px;
            padding: 10px 15px;
        }
        
        .timeline-date {
            font-size: 0.85rem;
            color: #777;
            margin-bottom: 5px;
        }
        
        .timeline-text {
            font-size: 0.95rem;
        }
        
        /* 图表容器 */
        .chart-container {
            height: 300px;
            display: flex;
            align-items: flex-end;
            justify-content: space-around;
            padding: 20px 0;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 20px;
        }
        
        .chart-bar {
            width: 40px;
            background-color: var(--primary-color);
            border-radius: 4px 4px 0 0;
            position: relative;
            transition: height 0.5s ease;
        }
        
        .chart-label {
            position: absolute;
            bottom: -25px;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 0.85rem;
        }
        
        .chart-value {
            position: absolute;
            top: -25px;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        /* 搜索和过滤 */
        .filter-bar {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .search-box {
            flex: 1;
            position: relative;
        }
        
        .search-box input {
            padding-left: 40px;
        }
        
        .search-box i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #777;
        }
        
        .filter-select {
            width: 200px;
        }

        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid var(--border-color);
        }

        .pagination-info {
            color: #666;
            font-size: 0.9rem;
        }

        .pagination-controls {
            display: flex;
            gap: 5px;
        }

        .pagination-btn {
            min-width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            cursor: pointer;
            transition: var(--transition);
        }

        .pagination-btn:hover:not(.disabled) {
            background-color: rgba(52, 152, 219, 0.1);
            color: var(--primary-color);
        }

        .pagination-btn.active {
            background-color: var(--primary-color);
            color: white;
        }

        .pagination-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .pagination-ellipsis {
            display: flex;
            align-items: flex-end;
            height: 32px;
            padding: 0 8px;
        }

        /* 加载动画 */
        .loading-spinner {
            display: none;
            text-align: center;
            padding: 20px;
        }

        .loading-spinner i {
            font-size: 1.5rem;
            color: var(--primary-color);
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 空状态提示 */
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #666;
        }

        .empty-state i {
            font-size: 3rem;
            color: #ddd;
            margin-bottom: 15px;
        }

        .empty-state h3 {
            font-weight: normal;
            margin-bottom: 10px;
        }

        /* 时间范围选择器样式 */
        .custom-date-range {
            display: none;
            margin-top: 15px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 6px;
            border: 1px solid var(--border-color);
        }

        .custom-date-range.active {
            display: block;
        }

        .date-range-fields {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .date-range-fields .form-group {
            flex: 1;
            margin-bottom: 0;
        }

        .date-range-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 10px;
        }

        /* 环形图表样式 */
.donut-chart {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.donut-segment {
    position: absolute;
    width: 100%;
    height: 100%;
    clip: rect(0, 200px, 200px, 100px);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

        .donut-segment.animate {
            opacity: 1;
            transform: scale(1);
        }

        .donut-segment-fill {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            clip: rect(0, 100px, 200px, 0);
            transform: rotate(0deg);
            transition: transform 1.5s ease-out;
        }

        .donut-center {
            position: absolute;
            width: 70%;
            height: 70%;
            background-color: white;
            border-radius: 50%;
            top: 15%;
            left: 15%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.8s ease-out 0.5s;
        }

        .donut-center.animate {
            opacity: 1;
            transform: scale(1);
        }

        .donut-center h3 {
            margin: 0;
            font-size: 1.8rem;
            color: var(--dark-color);
        }

        .donut-center p {
            margin: 5px 0 0;
            color: #777;
            font-size: 0.9rem;
        }

        .donut-legend {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 20px;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease-out 0.8s;
        }

        .donut-legend.animate {
            opacity: 1;
            transform: translateY(0);
        }

        .donut-legend-item {
            display: flex;
            align-items: center;
            margin: 5px 15px;
            cursor: pointer;
            transition: opacity 0.3s ease;
        }

        .donut-legend-item:hover {
            opacity: 0.8;
        }

        .donut-legend-color {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            margin-right: 8px;
            flex-shrink: 0;
        }

        .donut-legend-label {
            font-size: 0.85rem;
            color: #666;
        }

       /* 趋势图表样式 */
.trend-chart {
    height: 250px;
    position: relative;
    margin-top: 20px;
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.trend-line {
    position: absolute;
    bottom: 30px;
    left: 40px;
    right: 20px;
    height: 2px;
    background-color: var(--border-color);
    z-index: 1;
}

        .trend-line-fill {
            position: absolute;
            bottom: 30px;
            left: 40px;
            height: 2px;
            background-color: var(--primary-color);
            width: 0;
            transition: width 1.5s ease-out;
        }

        .trend-point {
            position: absolute;
            bottom: 30px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--primary-color);
            border: 2px solid white;
            transform: translate(-50%, 50%);
            z-index: 3;
            transition: all 0.3s ease;
            opacity: 0;
        }

        .trend-point.animate {
            opacity: 1;
            animation: pointRise 1s ease-out forwards;
        }

        @keyframes pointRise {
            0% { transform: translate(-50%, 150%); }
            100% { transform: translate(-50%, 50%); }
        }

        .trend-point:hover {
            transform: translate(-50%, 50%) scale(1.2);
            box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2);
        }

        .trend-point-value {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--primary-color);
            background-color: white;
            padding: 2px 6px;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transition: opacity 0.5s ease-out 0.8s;
        }

        .trend-point-value.animate {
            opacity: 1;
        }

        .trend-point-label {
            position: absolute;
            bottom: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.8rem;
            color: #777;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.5s ease-out 0.8s;
        }

        .trend-point-label.animate {
            opacity: 1;
        }

        .trend-grid {
            position: absolute;
            top: 0;
            left: 40px;
            right: 20px;
            bottom: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .trend-grid-line {
            height: 1px;
            background-color: rgba(0, 0, 0, 0.05);
        }

        .trend-y-label {
            position: absolute;
            font-size: 0.7rem;
            color: #999;
        }

        .trend-connection-line {
            position: absolute;
            height: 2px;
            background-color: var(--primary-color);
            z-index: 2;
            opacity: 0;
            transition: opacity 0.5s ease-out;
        }

        .trend-connection-line.animate {
            opacity: 1;
        }

        /* 响应时间卡片样式 */
        .response-time-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 20px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .response-time-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }

        .response-time-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: rgba(52, 152, 219, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            color: var(--primary-color);
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .response-time-info {
            flex: 1;
        }

        .response-time-info h3 {
            margin: 0 0 5px;
            font-size: 1.2rem;
            color: var(--dark-color);
        }

        .response-time-info p {
            margin: 0;
            color: #777;
            font-size: 0.9rem;
        }

        .response-time-stats {
            text-align: right;
            min-width: 100px;
        }

        .response-time-stats h2 {
            margin: 0;
            font-size: 2rem;
            color: var(--primary-color);
        }

        .response-time-stats p {
            margin: 5px 0 0;
            color: #777;
            font-size: 0.9rem;
        }

        /* 新增的统计卡片样式 */
        .stat-card-enhanced {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 20px;
            margin-bottom: 20px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .stat-card-enhanced:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .stat-card-enhanced::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background-color: var(--primary-color);
        }

        .stat-card-enhanced.primary::before {
            background-color: var(--primary-color);
        }

        .stat-card-enhanced.success::before {
            background-color: var(--success-color);
        }

        .stat-card-enhanced.warning::before {
            background-color: var(--warning-color);
        }

        .stat-card-enhanced.danger::before {
            background-color: var(--danger-color);
        }

        .stat-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .stat-card-title {
            font-size: 1.1rem;
            color: var(--dark-color);
            font-weight: 500;
        }

        .stat-card-value {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 10px 0;
            color: var(--dark-color);
            transition: all 0.3s ease;
        }

        .stat-card-change {
            display: flex;
            align-items: center;
            font-size: 0.9rem;
            color: #666;
        }

        .stat-card-change.positive {
            color: var(--success-color);
        }

        .stat-card-change.negative {
            color: var(--danger-color);
        }

        .stat-card-change i {
            margin-right: 5px;
        }

        .stat-card-footer {
            margin-top: 15px;
            font-size: 0.85rem;
            color: #777;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .stat-card-period {
            background-color: rgba(52, 152, 219, 0.1);
            color: var(--primary-color);
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
        }

        /* 时间范围选择器样式 */
        .time-range-selector {
            display: flex;
            background-color: #f5f7fa;
            border-radius: 8px;
            padding: 5px;
            margin-bottom: 20px;
        }

        .time-range-btn {
            flex: 1;
            padding: 8px 12px;
            text-align: center;
            cursor: pointer;
            border-radius: 6px;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }

        .time-range-btn.active {
            background-color: white;
            box-shadow: var(--shadow);
            color: var(--primary-color);
            font-weight: 500;
        }

        /* 数字动画效果 */
        @keyframes countUp {
            from { 
                opacity: 0;
                transform: translateY(10px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }

        .counting {
            animation: countUp 0.8s ease forwards;
        }
        
        /* 图表加载动画 */
        .chart-loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
        
        .chart-loading .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(52, 152, 219, 0.1);
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1><i class="fas fa-building"></i> 智慧社区管理系统</h1>
    </div>
    <div class="nav">
        <ul>
            <li><a href="shoye.html"><i class="fas fa-home"></i> 首页</a></li>
            <li><a href="resident.html"><i class="fas fa-users"></i> 住户管理</a></li>
            <li><a href="property.html"><i class="fas fa-home"></i> 房产管理</a></li>
            <li><a href="repair.html" class="active"><i class="fas fa-tools"></i> 报修维护</a></li>
            <li><a href="fee.html"><i class="fas fa-money-bill-wave"></i> 费用管理</a></li>
            <li><a href="security.html"><i class="fas fa-shield-alt"></i> 社区安防</a></li>
            <li><a href="index.html"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li>
        </ul>
    </div>
    <div class="container">
        <!-- 报修维护 -->
        <div id="repair" class="section">
            <div class="main-content">
                <div class="sidebar">
                    <h3><i class="fas fa-tools"></i> 报修维护</h3>
                    <ul class="sidebar-menu">
                        <li><a href="#repair-list" class="active" id="list-tab-link"><i class="fas fa-list"></i> 报修列表</a></li>
                        <li><a href="#repair-add" id="add-tab-link"><i class="fas fa-plus"></i> 添加报修</a></li>
                        <li><a href="#repair-statistics" id="stats-tab-link"><i class="fas fa-chart-bar"></i> 统计分析</a></li>
                    </ul>
                    
                    <h3 style="margin-top: 30px;"><i class="fas fa-filter"></i> 筛选条件</h3>
                    <div class="form-group">
                        <label for="status-filter">报修状态</label>
                        <select id="status-filter" class="form-control">
                            <option value="all">所有状态</option>
                            <option value="pending">待处理</option>
                            <option value="processing">处理中</option>
                            <option value="completed">已完成</option>
                            <option value="closed">已关闭</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="type-filter">报修类型</label>
                        <select id="type-filter" class="form-control">
                            <option value="all">所有类型</option>
                            <option value="water">水电维修</option>
                            <option value="elevator">电梯故障</option>
                            <option value="public">公共设施</option>
                            <option value="security">安防系统</option>
                        </select>
                    </div>
                    <button class="btn btn-primary" id="apply-filter-btn" style="width: 100%;">
                        <i class="fas fa-filter"></i> 应用筛选
                    </button>
                </div>
                
                <div class="content">
                    <!-- 报修列表 -->
                    <div id="repair-list" class="tab-content active">
                        <div class="card">
                            <div class="card-header">
                                <h2><i class="fas fa-list"></i> 报修工单列表</h2>
                                <button class="btn btn-primary" id="new-repair-btn">
                                    <i class="fas fa-plus"></i> 新建报修
                                </button>
                            </div>
                            
                            <div class="filter-bar">
                                <div class="search-box">
                                    <i class="fas fa-search"></i>
                                    <input type="text" id="search-input" class="form-control" placeholder="搜索报修单号、标题或报修人...">
                                </div>
                                <select id="sort-select" class="form-control filter-select">
                                    <option value="newest">按时间排序: 最新优先</option>
                                    <option value="oldest">按时间排序: 最旧优先</option>
                                    <option value="priority">按优先级排序</option>
                                </select>
                            </div>
                            
                            <div class="loading-spinner">
                                <i class="fas fa-spinner"></i>
                                <p>正在加载数据...</p>
                            </div>
                            
                            <div class="table-responsive" id="repair-table-container">
                                <table class="table" id="repair-table">
                                    <thead>
                                        <tr>
                                            <th>报修单号</th>
                                            <th>标题</th>
                                            <th>报修人</th>
                                            <th>报修类型</th>
                                            <th>提交时间</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="repair-table-body">
                                        <!-- 数据将通过JavaScript动态加载 -->
                                    </tbody>
                                </table>
                            </div>
                            
                            <div class="empty-state" id="empty-state" style="display: none;">
                                <i class="fas fa-inbox"></i>
                                <h3>没有找到匹配的报修工单</h3>
                                <p>尝试调整您的搜索条件或创建新的报修工单</p>
                                <button class="btn btn-primary" id="new-repair-empty-btn">
                                    <i class="fas fa-plus"></i> 新建报修
                                </button>
                            </div>
                            
                            <div class="pagination" id="pagination-controls">
                                <div class="pagination-info" id="pagination-info">显示 1 到 5 项，共 0 项</div>
                                <div class="pagination-controls">
                                    <div class="pagination-btn disabled" id="prev-page">
                                        <i class="fas fa-chevron-left"></i>
                                    </div>
                                    <div class="pagination-btn active">1</div>
                                    <div class="pagination-btn">2</div>
                                    <div class="pagination-btn">3</div>
                                    <div class="pagination-ellipsis">...</div>
                                    <div class="pagination-btn">6</div>
                                    <div class="pagination-btn" id="next-page">
                                        <i class="fas fa-chevron-right"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 添加报修 -->
                    <div id="repair-add" class="tab-content">
                        <div class="card">
                            <div class="card-header">
                                <h2><i class="fas fa-plus-circle"></i> 创建新报修单</h2>
                            </div>
                            
                            <form id="repair-form">
<input type="hidden" id="repair-id" value="${repair.id}">
                                <div class="repair-details">
                                    <div>
                                        <div class="form-group">
                                            <label for="repair-title">报修标题 *</label>
                                            <input type="text" id="repair-title" class="form-control" placeholder="简要描述报修问题" required>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="repair-type">报修类型 *</label>
                                            <select id="repair-type" class="form-control" required>
                                                <option value="">请选择报修类型</option>
                                                <option value="water">水电维修</option>
                                                <option value="elevator">电梯故障</option>
                                                <option value="public">公共设施</option>
                                                <option value="security">安防系统</option>
                                                <option value="other">其他</option>
                                            </select>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="repair-location">报修位置 *</label>
                                            <select id="repair-location" class="form-control" required>
                                                <option value="">请选择位置</option>
                                                <option value="building1">1号楼</option>
                                                <option value="building2">2号楼</option>
                                                <option value="building3">3号楼</option>
                                                <option value="public_area">公共区域</option>
                                                <option value="underground">地下车库</option>
                                            </select>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="repair-priority">优先级</label>
                                            <select id="repair-priority" class="form-control">
                                                <option value="normal">一般</option>
                                                <option value="urgent">紧急</option>
                                                <option value="critical">严重</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <div>
                                        <div class="form-group">
                                            <label for="repair-username">报修人 *</label>
                                            <input type="text" id="repair-username" class="form-control" placeholder="请输入姓名" required>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="repair-phone">联系电话 *</label>
                                            <input type="tel" id="repair-phone" class="form-control" placeholder="请输入手机号码" required>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="repair-address">详细地址</label>
                                            <input type="text" id="repair-address" class="form-control" placeholder="例如：A栋502室">
                                        </div>
                                        
                                        <div class="form-group">
                                            <label for="repair-images">上传图片</label>
                                            <input type="file" id="repair-images" class="form-control" multiple>
                                            <div class="image-preview" id="image-preview-container">
                                                <!-- 图片预览将在这里动态添加 -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label for="repair-description">问题描述 *</label>
                                    <textarea id="repair-description" class="form-control" placeholder="请详细描述报修问题..." required></textarea>
                                </div>
                                
                                <div style="text-align: right; margin-top: 20px;">
                                    <button type="reset" class="btn btn-outline">重置</button>
                                    <button type="submit" class="btn btn-success">提交报修</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    
                    <!-- 统计分析 -->
<div id="repair-statistics" class="tab-content">
    <div class="card">
        <div class="card-header">
            <h2><i class="fas fa-chart-bar"></i> 报修统计分析</h2>
            <div>
                <select class="form-control" id="stats-time-range">
                    <option value="month">本月</option>
                    <option value="quarter">本季度</option>
                    <option value="year">本年度</option>
                    <option value="custom">自定义时间范围</option>
                </select>
            </div>
        </div>
        
        <!-- 自定义时间范围选择器 -->
        <div class="custom-date-range" id="custom-date-range">
            <div class="date-range-fields">
                <div class="form-group">
                    <label for="start-date">开始日期</label>
                    <input type="date" id="start-date" class="form-control">
                </div>
                <div class="form-group">
                    <label for="end-date">结束日期</label>
                    <input type="date" id="end-date" class="form-control">
                </div>
            </div>
            <div class="date-range-actions">
                <button class="btn btn-outline" id="cancel-custom-date">取消</button>
                <button class="btn btn-primary" id="apply-custom-date">应用</button>
            </div>
        </div>
        
        <!-- 新增的高级统计卡片 -->
        <div class="stats-container">
            <div class="stat-card-enhanced primary">
                <div class="stat-card-header">
                    <div class="stat-card-title">报修总数</div>
                    <div class="stat-card-period" id="total-period-label">本月</div>
                </div>
                <div class="stat-card-value" id="total-repairs-enhanced">20</div>
                <div class="stat-card-change positive">
                    <i class="fas fa-arrow-up"></i>
                    <span id="total-change">12%</span> 较上月
                </div>
                <div class="stat-card-footer">
                    <span id="total-range">2023年6月1日-6月30日</span>
                </div>
            </div>
            
            <div class="stat-card-enhanced success">
                <div class="stat-card-header">
                    <div class="stat-card-title">已完成报修</div>
                    <div class="stat-card-period" id="completed-period-label">本月</div>
                </div>
                <div class="stat-card-value" id="completed-repairs-enhanced">28</div>
                <div class="stat-card-change positive">
                    <i class="fas fa-arrow-up"></i>
                    <span id="completed-change">15%</span> 较上月
                </div>
                <div class="stat-card-footer">
                    <span id="completed-range">2023年6月1日-6月30日</span>
                </div>
            </div>
            
            <div class="stat-card-enhanced warning">
                <div class="stat-card-header">
                    <div class="stat-card-title">处理中报修</div>
                    <div class="stat-card-period" id="processing-period-label">本月</div>
                </div>
                <div class="stat-card-value" id="processing-repairs-enhanced">3</div>
                <div class="stat-card-change negative">
                    <i class="fas fa-arrow-down"></i>
                    <span id="processing-change">8%</span> 较上月
                </div>
                <div class="stat-card-footer">
                    <span id="processing-range">2023年6月1日-6月30日</span>
                </div>
            </div>
            
            <div class="stat-card-enhanced danger">
                <div class="stat-card-header">
                    <div class="stat-card-title">待处理报修</div>
                    <div class="stat-card-period" id="pending-period-label">本月</div>
                </div>
                <div class="stat-card-value" id="pending-repairs-enhanced">1</div>
                <div class="stat-card-change negative">
                    <i class="fas fa-arrow-down"></i>
                    <span id="pending-change">10%</span> 较上月
                </div>
                <div class="stat-card-footer">
                    <span id="pending-range">2023年6月1日-6月30日</span>
                </div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h3>报修处理效率</h3>
            </div>
            <div style="padding: 20px;">
                <div class="response-time-card">
                    <div class="response-time-icon">
                        <i class="fas fa-stopwatch"></i>
                    </div>
                    <div class="response-time-info">
                        <h3>平均响应时间</h3>
                        <p>从报修提交到维修人员响应的时间</p>
                    </div>
                    <div class="response-time-stats">
                        <h2 id="avg-response-time">2.5h</h2>
                        <p id="response-time-change">与上月相比 <span style="color: var(--success-color);">↓12%</span></p>
                    </div>
                </div>
                
                <div class="response-time-card">
                    <div class="response-time-icon">
                        <i class="fas fa-tools"></i>
                    </div>
                    <div class="response-time-info">
                        <h3>平均处理时间</h3>
                        <p>从报修提交到问题解决的时间</p>
                    </div>
                    <div class="response-time-stats">
                        <h2 id="avg-repair-time">8.2h</h2>
                        <p id="repair-time-change">与上月相比 <span style="color: var(--success-color);">↓8%</span></p>
                    </div>
                </div>
                
                <div class="response-time-card">
                    <div class="response-time-icon">
                        <i class="fas fa-calendar-check"></i>
                    </div>
                    <div class="response-time-info">
                        <h3>按时完成率</h3>
                        <p>在承诺时间内完成的报修比例</p>
                    </div>
                    <div class="response-time-stats">
                        <h2 id="on-time-rate">92%</h2>
                        <p id="on-time-change">与上月相比 <span style="color: var(--success-color);">↑5%</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
                    
                    <!-- 报修详情 -->
                    <div id="repair-detail" class="tab-content">
                        <div class="card">
                            <div class="card-header">
                                <h2><i class="fas fa-tools"></i> 报修工单详情</h2>
                                <button class="btn btn-outline" id="back-to-list">
                                    <i class="fas fa-arrow-left"></i> 返回列表
                                </button>
                            </div>
                            
                            <div class="repair-details">
                                <div>
                                    <div class="detail-card">
                                        <h3>基本信息</h3>
                                        <div class="detail-item">
                                            <div class="detail-label">报修单号:</div>
                                            <div class="detail-value">REP20230615001</div>
                                        </div>
                                        <div class="detail-item">
                                            <div class="detail-label">报修标题:</div>
                                            <div class="detail-value">3号楼电梯故障</div>
                                        </div>
                                        <div class="detail-item">
                                            <div class="detail-label">报修类型:</div>
                                            <div class="detail-value">电梯故障</div>
                                        </div>
                                        <div class="detail-item">
                                            <div class="detail-label">报修位置:</div>
                                            <div class="detail-value">3号楼1单元</div>
                                        </div>
                                        <div class="detail-item">
                                            <div class="detail-label">优先级:</div>
                                            <div class="detail-value"><span class="badge badge-danger">紧急</span></div>
                                        </div>
                                    </div>
                                    
                                    <div class="detail-card">
                                        <h3>报修人信息</h3>
                                        <div class="detail-item">
                                            <div class="detail-label">报修人:</div>
                                            <div class="detail-value">张先生</div>
                                        </div>
                                        <div class="detail-item">
                                            <div class="detail-label">联系电话:</div>
                                            <div class="detail-value">138****5678</div>
                                        </div>
                                        <div class="detail-item">
                                            <div class="detail-label">详细地址:</div>
                                            <div class="detail-value">A栋501室</div>
                                        </div>
                                        <div class="detail-item">
                                            <div class="detail-label">提交时间:</div>
                                            <div class="detail-value">2023-06-15 10:23:45</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div>
                                    <div class="detail-card">
                                        <h3>问题描述</h3>
                                        <p>3号楼1单元电梯从今天早上开始无法正常运行，停在1楼无法上升，电梯内显示故障代码E23。目前已有三位住户被困后安全救出，急需维修。</p>
                                        
                                        <div class="image-preview">
                                            <div class="image-item">
                                                <img src="https://via.placeholder.com/80x80/3498db/ffffff?text=电梯" alt="报修图片">
                                            </div>
                                            <div class="image-item">
                                                <img src="https://via.placeholder.com/80x80/3498db/ffffff?text=故障" alt="报修图片">
                                            </div>
                                            <div class="image-item">
                                                <img src="https://via.placeholder.com/80x80/3498db/ffffff?text=代码" alt="报修图片">
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="detail-card">
                                        <h3>处理信息</h3>
                                        <div class="detail-item">
                                            <div class="detail-label">当前状态:</div>
                                            <div class="detail-value"><span class="badge badge-warning">处理中</span></div>
                                        </div>
                                        <div class="detail-item">
                                            <div class="detail-label">处理人员:</div>
                                            <div class="detail-value">李维修师</div>
                                        </div>
                                        <div class="detail-item">
                                            <div class="detail-label">联系电话:</div>
                                            <div class="detail-value">135****1234</div>
                                        </div>
                                        <div class="detail-item">
                                            <div class="detail-label">预计完成:</div>
                                            <div class="detail-value">2023-06-16 18:00前</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="progress-container">
                                <h3 style="margin-bottom: 20px;">处理进度</h3>
                                <div class="progress-steps">
                                    <div class="progress-bar" style="width: 75%;"></div>
                                    <div class="step completed">
                                        <div class="step-icon"><i class="fas fa-check"></i></div>
                                        <div class="step-label">提交报修</div>
                                    </div>
                                    <div class="step completed">
                                        <div class="step-icon"><i class="fas fa-check"></i></div>
                                        <div class="step-label">响应确认</div>
                                    </div>
                                    <div class="step completed">
                                        <div class="step-icon"><i class="fas fa-check"></i></div>
                                        <div class="step-label">维修处理</div>
                                    </div>
                                    <div class="step active">
                                        <div class="step-icon"><i class="fas fa-spinner"></i></div>
                                        <div class="step-label">完成验收</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="detail-card">
                                <h3>处理记录</h3>
                                <div class="timeline">
                                    <div class="timeline-item">
                                        <div class="timeline-content">
                                            <div class="timeline-date">2023-06-15 10:45:32</div>
                                            <div class="timeline-text">已分配维修人员：李维修师</div>
                                        </div>
                                    </div>
                                    <div class="timeline-item">
                                        <div class="timeline-content">
                                            <div class="timeline-date">2023-06-15 11:20:15</div>
                                            <div class="timeline-text">维修人员已到达现场，开始检修</div>
                                        </div>
                                    </div>
                                    <div class="timeline-item">
                                        <div class="timeline-content">
                                            <div class="timeline-date">2023-06-15 14:30:45</div>
                                            <div class="timeline-text">已确定故障原因：电梯控制主板损坏，需要更换</div>
                                        </div>
                                    </div>
                                    <div class="timeline-item">
                                        <div class="timeline-content">
                                            <div class="timeline-date">2023-06-15 16:10:22</div>
                                            <div class="timeline-text">备件已到位，开始更换主板</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group" style="margin-top: 20px;">
                                    <label>添加处理记录</label>
                                    <textarea class="form-control" placeholder="请输入处理记录..."></textarea>
                                </div>
                                <button class="btn btn-primary">添加记录</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 模拟数据库中的报修工单数据
        const repairData = [
            { 
                id: 'REP20230615001', 
                title: '3号楼电梯故障', 
                resident: '张先生 (A栋501)', 
                type: '电梯故障', 
                date: '2023-06-15 10:23', 
                status: 'processing', 
                priority: 'urgent',
                location: '3号楼1单元',
                username: '张先生',
                phone: '138****5678',
                address: 'A栋501室',
                description: '3号楼1单元电梯从今天早上开始无法正常运行，停在1楼无法上升，电梯内显示故障代码E23。目前已有三位住户被困后安全救出，急需维修。'
            },
            { 
                id: 'REP20230614005', 
                title: '小区东门门禁故障', 
                resident: '物业办公室', 
                type: '安防系统', 
                date: '2023-06-14 16:45', 
                status: 'completed', 
                priority: 'normal',
                location: '小区东门',
                username: '物业办公室',
                phone: '138****1234',
                address: '物业办公室',
                description: '小区东门门禁系统无法正常开启，影响住户出入。'
            },
            { 
                id: 'REP20230613012', 
                title: 'B栋2单元漏水', 
                resident: '李女士 (B栋203)', 
                type: '水电维修', 
                date: '2023-06-13 09:12', 
                status: 'pending', 
                priority: 'urgent',
                location: 'B栋2单元',
                username: '李女士',
                phone: '138****2345',
                address: 'B栋203室',
                description: 'B栋2单元5楼水管漏水，已经影响到4楼住户。'
            },
            { 
                id: 'REP20230612008', 
                title: '儿童游乐设施损坏', 
                resident: '王先生 (C栋102)', 
                type: '公共设施', 
                date: '2023-06-12 14:30', 
                status: 'closed', 
                priority: 'normal',
                location: '小区中央花园',
                username: '王先生',
                phone: '138****3456',
                address: 'C栋102室',
                description: '儿童游乐区的秋千链条断裂，存在安全隐患。'
            },
            { 
                id: 'REP20230611003', 
                title: '地下车库照明故障', 
                resident: '物业办公室', 
                type: '公共设施', 
                date: '2023-06-11 18:20', 
                status: 'completed', 
                priority: 'normal',
                location: '地下车库B区',
                username: '物业办公室',
                phone: '138****4567',
                address: '物业办公室',
                description: '地下车库B区多个照明灯不亮，影响夜间停车安全。'
            },
            { 
                id: 'REP20230610007', 
                title: 'A栋楼道灯不亮', 
                resident: '赵女士 (A栋302)', 
                type: '公共设施', 
                date: '2023-06-10 20:15', 
                status: 'completed', 
                priority: 'normal',
                location: 'A栋3楼',
                username: '赵女士',
                phone: '138****5678',
                address: 'A栋302室',
                description: 'A栋3楼楼道灯全部不亮，影响夜间出行。'
            },
            { 
                id: 'REP20230609002', 
                title: '小区喷泉故障', 
                resident: '物业办公室', 
                type: '公共设施', 
                date: '2023-06-09 09:45', 
                status: 'completed', 
                priority: 'normal',
                location: '小区中央广场',
                username: '物业办公室',
                phone: '138****6789',
                address: '物业办公室',
                description: '中央广场喷泉无法正常工作，水泵可能有故障。'
            },
            { 
                id: 'REP20230608011', 
                title: '2号楼水管漏水', 
                resident: '钱先生 (B栋105)', 
                type: '水电维修', 
                date: '2023-06-08 14:30', 
                status: 'completed', 
                priority: 'urgent',
                location: '2号楼1单元',
                username: '钱先生',
                phone: '138****7890',
                address: 'B栋105室',
                description: '2号楼1单元5楼水管爆裂，水流较大，需要紧急处理。'
            },
            { 
                id: 'REP20230607006', 
                title: '小区监控摄像头故障', 
                resident: '物业办公室', 
                type: '安防系统', 
                date: '2023-06-07 11:20', 
                status: 'completed', 
                priority: 'normal',
                location: '小区南门',
                username: '物业办公室',
                phone: '138****8901',
                address: '物业办公室',
                description: '南门入口处的监控摄像头无法正常工作。'
            },
            { 
                id: 'REP20230606009', 
                title: '1号楼电梯异响', 
                resident: '孙女士 (A栋401)', 
                type: '电梯故障', 
                date: '2023-06-06 08:50', 
                status: 'completed', 
                priority: 'normal',
                location: '1号楼2单元',
                username: '孙女士',
                phone: '138****9012',
                address: 'A栋401室',
                description: '1号楼2单元电梯运行时发出异常响声，担心安全问题。'
            },
            { 
                id: 'REP20230605004', 
                title: '小区垃圾站门损坏', 
                resident: '物业办公室', 
                type: '公共设施', 
                date: '2023-06-05 16:10', 
                status: 'completed', 
                priority: 'normal',
                location: '小区垃圾站',
                username: '物业办公室',
                phone: '138****0123',
                address: '物业办公室',
                description: '垃圾站的门铰链断裂，门无法正常关闭。'
            },
            { 
                id: 'REP20230604010', 
                title: '3号楼门禁卡失效', 
                resident: '周先生 (C栋303)', 
                type: '安防系统', 
                date: '2023-06-04 19:30', 
                status: 'completed', 
                priority: 'normal',
                location: '3号楼',
                username: '周先生',
                phone: '138****1234',
                address: 'C栋303室',
                description: '3号楼门禁系统无法识别我的门禁卡，多次尝试无效。'
            },
            { 
                id: 'REP20230603013', 
                title: '小区绿化带水管爆裂', 
                resident: '物业办公室', 
                type: '水电维修', 
                date: '2023-06-03 07:15', 
                status: 'completed', 
                priority: 'urgent',
                location: '小区中央绿化带',
                username: '物业办公室',
                phone: '138****2345',
                address: '物业办公室',
                description: '中央绿化带的自动喷灌系统水管爆裂，大量水涌出。'
            },
            { 
                id: 'REP20230602014', 
                title: '地下车库排水不畅', 
                resident: '物业办公室', 
                type: '水电维修', 
                date: '2023-06-02 13:40', 
                status: 'completed', 
                priority: 'normal',
                location: '地下车库A区',
                username: '物业办公室',
                phone: '138****3456',
                address: '物业办公室',
                description: '地下车库A区排水沟堵塞，雨后积水严重。'
            },
            { 
                id: 'REP20230601015', 
                title: '小区健身器材损坏', 
                resident: '吴先生 (B栋204)', 
                type: '公共设施', 
                date: '2023-06-01 17:25', 
                status: 'completed', 
                priority: 'normal',
                location: '小区健身区',
                username: '吴先生',
                phone: '138****4567',
                address: 'B栋204室',
                description: '健身区的划船机把手断裂，存在安全隐患。'
            },
            { 
                id: 'REP20230531016', 
                title: 'A栋电梯按钮失灵', 
                resident: '郑女士 (A栋601)', 
                type: '电梯故障', 
                date: '2023-05-31 10:50', 
                status: 'completed', 
                priority: 'normal',
                location: 'A栋',
                username: '郑女士',
                phone: '138****5678',
                address: 'A栋601室',
                description: 'A栋电梯的6楼按钮无法正常响应，需要多次按压。'
            },
            { 
                id: 'REP20230530017', 
                title: '小区围墙照明故障', 
                resident: '物业办公室', 
                type: '公共设施', 
                date: '2023-05-30 21:05', 
                status: 'completed', 
                priority: 'normal',
                location: '小区西侧围墙',
                username: '物业办公室',
                phone: '138****6789',
                address: '物业办公室',
                description: '西侧围墙的多盏照明灯不亮，影响夜间安全。'
            },
            { 
                id: 'REP20230529018', 
                title: 'B栋楼道窗户损坏', 
                resident: '王先生 (B栋103)', 
                type: '公共设施', 
                date: '2023-05-29 15:20', 
                status: 'completed', 
                priority: 'normal',
                location: 'B栋3楼',
                username: '王先生',
                phone: '138****7890',
                address: 'B栋103室',
                description: 'B栋3楼楼道窗户玻璃破裂，需要更换。'
            },
            { 
                id: 'REP20230528019', 
                title: '小区大门自动开启故障', 
                resident: '物业办公室', 
                type: '安防系统', 
                date: '2023-05-28 08:30', 
                status: 'completed', 
                priority: 'normal',
                location: '小区主大门',
                username: '物业办公室',
                phone: '138****8901',
                address: '物业办公室',
                description: '主大门的自动开启系统反应迟钝，有时无法自动开启。'
            },
            { 
                id: 'REP20230527020', 
                title: '1号楼水管爆裂', 
                resident: '吴先生 (A栋101)', 
                type: '水电维修', 
                date: '2023-05-27 14:15', 
                status: 'completed', 
                priority: 'critical',
                location: '1号楼',
                username: '吴先生',
                phone: '138****9012',
                address: 'A栋101室',
                description: '1号楼地下室主水管爆裂，大量水涌出，需要紧急处理。'
            },
            {
                location: '儿童游乐区',
                username: '张先生',
                phone: '138****0123',
                address: 'C栋201室',
                description: '儿童游乐区塑胶地面多处破损，孩子容易绊倒。'
            },
            { 
                id: 'REP20230525022', 
                title: '3号楼电梯运行异常', 
                resident: '赵女士 (C栋402)', 
                type: '电梯故障', 
                date: '2023-05-25 09:40', 
                status: 'completed', 
                priority: 'normal',
                location: '3号楼',
                username: '赵女士',
                phone: '138****1234',
                address: 'C栋402室',
                description: '3号楼电梯运行时晃动明显，有异响。'
            },
            { 
                id: 'REP20230524023', 
                title: '小区路灯不亮', 
                resident: '物业办公室', 
                type: '公共设施', 
                date: '2023-05-24 19:20', 
                status: 'completed', 
                priority: 'normal',
                location: '小区主干道',
                username: '物业办公室',
                phone: '138****2345',
                address: '物业办公室',
                description: '小区主干道多盏路灯不亮，影响夜间照明。'
            },
            { 
                id: 'REP20230523024', 
                title: 'A栋门禁系统故障', 
                resident: '孙先生 (A栋301)', 
                type: '安防系统', 
                date: '2023-05-23 11:10', 
                status: 'completed', 
                priority: 'normal',
                location: 'A栋',
                username: '孙先生',
                phone: '138****3456',
                address: 'A栋301室',
                description: 'A栋门禁系统无法识别任何门禁卡，住户无法进入。'
            },
            { 
                id: 'REP20230522025', 
                title: '小区垃圾分类站门损坏', 
                resident: '物业办公室', 
                type: '公共设施', 
                date: '2023-05-22 14:45', 
                status: 'completed', 
                priority: 'normal',
                location: '垃圾分类站',
                username: '物业办公室',
                phone: '138****4567',
                address: '物业办公室',
                description: '垃圾分类站的门锁损坏，无法正常锁闭。'
            },
            { 
                id: 'REP20230521026', 
                title: '2号楼电梯困人', 
                resident: '钱女士 (B栋502)', 
                type: '电梯故障', 
                date: '2023-05-21 08:15', 
                status: 'completed', 
                priority: 'critical',
                location: '2号楼',
                username: '钱女士',
                phone: '138****5678',
                address: 'B栋502室',
                description: '2号楼电梯突然停止运行，有住户被困在电梯内。'
            },
            { 
                id: 'REP20230520027', 
                title: '小区监控室空调故障', 
                resident: '物业办公室', 
                type: '公共设施', 
                date: '2023-05-20 13:30', 
                status: 'completed', 
                priority: 'normal',
                location: '监控室',
                username: '物业办公室',
                phone: '138****6789',
                address: '物业办公室',
                description: '监控室空调无法制冷，室内温度过高影响设备运行。'
            },
            { 
                id: 'REP20230519028', 
                title: 'B栋楼道灯不亮', 
                resident: '周女士 (B栋304)', 
                type: '公共设施', 
                date: '2023-05-19 17:55', 
                status: 'completed', 
                priority: 'normal',
                location: 'B栋3楼',
                username: '周女士',
                phone: '138****7890',
                address: 'B栋304室',
                description: 'B栋3楼楼道灯全部不亮，影响夜间出行。'
            },
            { 
                id: 'REP20230518029', 
                title: '小区喷泉控制面板故障', 
                resident: '物业办公室', 
                type: '公共设施', 
                date: '2023-05-18 10:25', 
                status: 'completed', 
                priority: 'normal',
                location: '中央广场',
                username: '物业办公室',
                phone: '138****8901',
                address: '物业办公室',
                description: '喷泉控制面板按键失灵，无法调节喷泉模式。'
            },
            { 
                id: 'REP20230517030', 
                title: '1号楼水管爆裂', 
                resident: '吴先生 (A栋101)', 
                type: '水电维修', 
                date: '2023-05-17 06:40', 
                status: 'completed', 
                priority: 'critical',
                location: '1号楼',
                username: '吴先生',
                phone: '138****9012',
                address: 'A栋101室',
                description: '1号楼地下室主水管爆裂，大量水涌出，需要紧急处理。'
            },
            { 
                id: 'REP20230516031', 
                title: '小区围墙监控摄像头故障', 
                resident: '物业办公室', 
                type: '安防系统', 
                date: '2023-05-16 15:10', 
                status: 'completed', 
                priority: 'normal',
                location: '小区北围墙',
                username: '物业办公室',
                phone: '138****0123',
                address: '物业办公室',
                description: '北围墙的两个监控摄像头无法传输图像。'
            },
            { 
                id: 'REP20230515032', 
                title: '3号楼电梯按钮不灵敏', 
                resident: '郑先生 (C栋503)', 
                type: '电梯故障', 
                date: '2023-05-15 09:20', 
                status: 'completed', 
                priority: 'normal',
                location: '3号楼',
                username: '郑先生',
                phone: '138****1234',
                address: 'C栋503室',
                description: '3号楼电梯按钮需要用力按压才能响应。'
            }
        ];
    
        // 当前页码和每页显示数量
        let currentPage = 1;
        const itemsPerPage = 5;
        let totalItems = 0;
        let filteredData = [];
    
        // DOM元素
        const repairTableBody = document.getElementById('repair-table-body');
        const paginationInfo = document.getElementById('pagination-info');
        const paginationControls = document.getElementById('pagination-controls');
        const prevPageBtn = document.getElementById('prev-page');
        const nextPageBtn = document.getElementById('next-page');
        const searchInput = document.getElementById('search-input');
        const sortSelect = document.getElementById('sort-select');
        const statusFilter = document.getElementById('status-filter');
        const typeFilter = document.getElementById('type-filter');
        const applyFilterBtn = document.getElementById('apply-filter-btn');
        const loadingSpinner = document.querySelector('.loading-spinner');
        const emptyState = document.getElementById('empty-state');
        const repairTableContainer = document.getElementById('repair-table-container');
        const repairForm = document.getElementById('repair-form');
        const imagePreviewContainer = document.getElementById('image-preview-container');
        const repairImagesInput = document.getElementById('repair-images');
        const statsTimeRange = document.getElementById('stats-time-range');
        const customDateRange = document.getElementById('custom-date-range');
        const startDateInput = document.getElementById('start-date');
        const endDateInput = document.getElementById('end-date');
        const applyCustomDateBtn = document.getElementById('apply-custom-date');
        const cancelCustomDateBtn = document.getElementById('cancel-custom-date');
    
        document.addEventListener('DOMContentLoaded', function() {
    // 从localStorage加载新报修单
    const newRepairs = JSON.parse(localStorage.getItem('newRepairs') || '[]');
    if (newRepairs.length > 0) {
        newRepairs.forEach(repair => {
            repairData.unshift(repair);
        });
        localStorage.removeItem('newRepairs');
    }

    // 添加localStorage事件监听器，实时接收AI创建的报修单
    window.addEventListener('storage', function(e) {
        if (e.key === 'newRepairFromAI') {
            try {
                const newRepair = JSON.parse(e.newValue);
                if (newRepair && typeof window.createRepairTicket === 'function') {
                    window.createRepairTicket(newRepair);
                    // 显示成功通知
                    showNotification('成功接收新报修单', 'success');
                    // 清除存储的报修单数据
                    localStorage.removeItem('newRepairFromAI');
                }
            } catch (error) {
                console.error('处理AI报修单时发生错误:', error);
                showNotification('处理报修单失败', 'error');
            }
        }
    });
    
    // 初始化页面
    filteredData = [...repairData];
    totalItems = filteredData.length;
    renderTable();
    renderPagination();
    
    // 添加事件监听器
    searchInput.addEventListener('input', handleSearch);
    sortSelect.addEventListener('change', handleSortChange);
    applyFilterBtn.addEventListener('click', applyFilters);
    
    // 分页按钮事件
    prevPageBtn.addEventListener('click', goToPrevPage);
    nextPageBtn.addEventListener('click', goToNextPage);
    
    // 新建报修按钮事件
    document.getElementById('new-repair-btn').addEventListener('click', function() {
        showTab('repair-add');
    });
    
    document.getElementById('new-repair-empty-btn').addEventListener('click', function() {
        showTab('repair-add');
    });
    
    // 图片上传预览
    repairImagesInput.addEventListener('change', handleImageUpload);
    
    // 报修表单提交
    repairForm.addEventListener('submit', handleRepairSubmit);
    
    // 统计分析时间范围选择
    statsTimeRange.addEventListener('change', function() {
        if (this.value === 'custom') {
            customDateRange.classList.add('active');
            // 设置默认日期范围（最近30天）
            const endDate = new Date();
            const startDate = new Date();
            startDate.setDate(endDate.getDate() - 30);
            
            startDateInput.valueAsDate = startDate;
            endDateInput.valueAsDate = endDate;
        } else {
            customDateRange.classList.remove('active');
            updateStatistics();
        }
    });
    
    // 自定义日期范围应用按钮
    applyCustomDateBtn.addEventListener('click', function() {
        if (startDateInput.value && endDateInput.value) {
            updateStatistics();
        } else {
            alert('请选择完整的日期范围');
        }
    });
    
    cancelCustomDateBtn.addEventListener('click', function() {
        customDateRange.classList.remove('active');
        statsTimeRange.value = 'month';
        updateStatistics();
    });
    
    // 初始化统计分析
    updateStatistics();
    
    // 原有选项卡切换功能保持不变
    setupTabSwitching();
});
    
        // 渲染表格数据
        function renderTable() {
            // 显示加载动画
            loadingSpinner.style.display = 'block';
            repairTableContainer.style.display = 'none';
            emptyState.style.display = 'none';
            
            // 模拟API请求延迟
            setTimeout(() => {
                const startIndex = (currentPage - 1) * itemsPerPage;
                const endIndex = startIndex + itemsPerPage;
                const pageData = filteredData.slice(startIndex, endIndex);
                
                repairTableBody.innerHTML = '';
                
                if (pageData.length === 0) {
                    repairTableContainer.style.display = 'none';
                    emptyState.style.display = 'block';
                } else {
                    pageData.forEach(item => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${item.id}</td>
                            <td>${item.title}</td>
                            <td>${item.resident}</td>
                            <td>${item.type}</td>
                            <td>${item.date}</td>
                            <td>${getStatusBadge(item.status)}</td>
                            <td class="actions">
                                <button class="btn btn-sm btn-outline" onclick="showDetails('${item.id}')"><i class="fas fa-eye"></i> 查看</button>
                                <button class="btn btn-sm btn-outline" onclick="showEdit('${item.id}')"><i class="fas fa-edit"></i> 编辑</button>
                            </td>
                        `;
                        repairTableBody.appendChild(row);
                    });
                    
                    repairTableContainer.style.display = 'block';
                    emptyState.style.display = 'none';
                }
                
                loadingSpinner.style.display = 'none';
                
                // 更新分页信息
                updatePaginationInfo();
            }, 500); // 模拟网络延迟
        }
    
        // 获取状态标签
        function getStatusBadge(status) {
            switch(status) {
                case 'pending':
                    return '<span class="badge badge-primary">待处理</span>';
                case 'processing':
                    return '<span class="badge badge-warning">处理中</span>';
                case 'completed':
                    return '<span class="badge badge-success">已完成</span>';
                case 'closed':
                    return '<span class="badge badge-danger">已关闭</span>';
                default:
                    return '<span class="badge">未知</span>';
            }
        }
    
        // 渲染分页控件
        function renderPagination() {
            const totalPages = Math.ceil(totalItems / itemsPerPage);
            const paginationContainer = paginationControls.querySelector('.pagination-controls');
            
            // 清空现有页码按钮（保留前后导航按钮）
            paginationContainer.innerHTML = `
                <div class="pagination-btn disabled" id="prev-page">
                    <i class="fas fa-chevron-left"></i>
                </div>
            `;
            
            // 根据总页数决定如何显示页码
            if (totalPages <= 6) {
                // 显示所有页码
                for (let i = 1; i <= totalPages; i++) {
                    const pageBtn = document.createElement('div');
                    pageBtn.className = `pagination-btn ${i === currentPage ? 'active' : ''}`;
                    pageBtn.textContent = i;
                    pageBtn.addEventListener('click', () => goToPage(i));
                    paginationContainer.appendChild(pageBtn);
                }
            } else {
                // 显示部分页码，带省略号
                if (currentPage <= 3) {
                    // 显示前3页，省略号，最后1页
                    for (let i = 1; i <= 3; i++) {
                        addPageButton(i, paginationContainer);
                    }
                    addEllipsis(paginationContainer);
                    addPageButton(totalPages, paginationContainer);
                } else if (currentPage >= totalPages - 2) {
                    // 显示第1页，省略号，最后3页
                    addPageButton(1, paginationContainer);
                    addEllipsis(paginationContainer);
                    for (let i = totalPages - 2; i <= totalPages; i++) {
                        addPageButton(i, paginationContainer);
                    }
                } else {
                    // 显示第1页，省略号，当前页前后各1页，省略号，最后1页
                    addPageButton(1, paginationContainer);
                    addEllipsis(paginationContainer);
                    for (let i = currentPage - 1; i <= currentPage + 1; i++) {
                        addPageButton(i, paginationContainer);
                    }
                    addEllipsis(paginationContainer);
                    addPageButton(totalPages, paginationContainer);
                }
            }
            
            // 添加下一页按钮
            const nextBtn = document.createElement('div');
            nextBtn.className = `pagination-btn ${currentPage === totalPages ? 'disabled' : ''}`;
            nextBtn.id = 'next-page';
            nextBtn.innerHTML = '<i class="fas fa-chevron-right"></i>';
            nextBtn.addEventListener('click', goToNextPage);
            paginationContainer.appendChild(nextBtn);
            
            // 更新上一页按钮状态
            prevPageBtn.className = `pagination-btn ${currentPage === 1 ? 'disabled' : ''}`;
            
            // 更新分页信息
            updatePaginationInfo();
        }
    
        // 添加页码按钮
        function addPageButton(pageNum, container) {
            const pageBtn = document.createElement('div');
            pageBtn.className = `pagination-btn ${pageNum === currentPage ? 'active' : ''}`;
            pageBtn.textContent = pageNum;
            pageBtn.addEventListener('click', () => goToPage(pageNum));
            container.appendChild(pageBtn);
        }
    
        // 添加省略号
        function addEllipsis(container) {
            const ellipsis = document.createElement('div');
            ellipsis.className = 'pagination-ellipsis';
            ellipsis.textContent = '...';
            container.appendChild(ellipsis);
        }
    
        // 更新分页信息
        function updatePaginationInfo() {
            const startItem = (currentPage - 1) * itemsPerPage + 1;
            const endItem = Math.min(currentPage * itemsPerPage, totalItems);
            paginationInfo.textContent = `显示 ${startItem} 到 ${endItem} 项，共 ${totalItems} 项`;
        }
    
        // 跳转到指定页码
        function goToPage(page) {
            if (page < 1 || page > Math.ceil(totalItems / itemsPerPage)) return;
            currentPage = page;
            renderTable();
            renderPagination();
        }
    
        // 跳转到上一页
        function goToPrevPage() {
            if (currentPage > 1) {
                goToPage(currentPage - 1);
            }
        }
    
        // 跳转到下一页
        function goToNextPage() {
            if (currentPage < Math.ceil(totalItems / itemsPerPage)) {
                goToPage(currentPage + 1);
            }
        }
    
        // 处理搜索
        function handleSearch() {
            currentPage = 1;
            applyFilters();
        }
    
        // 处理排序
        function handleSortChange() {
            currentPage = 1;
            applyFilters();
        }
    
        // 应用筛选条件
        function applyFilters() {
            const searchTerm = searchInput.value.toLowerCase();
            const statusFilterValue = statusFilter.value;
            const typeFilterValue = typeFilter.value;
            const sortValue = sortSelect.value;
            
            // 筛选数据
            filteredData = repairData.filter(item => {
                // 搜索条件
                const matchesSearch = 
                    item.id.toLowerCase().includes(searchTerm) ||
                    item.title.toLowerCase().includes(searchTerm) ||
                    item.resident.toLowerCase().includes(searchTerm);
                
                // 状态筛选
                const matchesStatus = statusFilterValue === 'all' || item.status === statusFilterValue;
                
                // 类型筛选
                const matchesType = typeFilterValue === 'all' || item.type === typeFilterValue;
                
                return matchesSearch && matchesStatus && matchesType;
            });
            
            // 排序数据
            switch(sortValue) {
                case 'newest':
                    filteredData.sort((a, b) => new Date(b.date) - new Date(a.date));
                    break;
                case 'oldest':
                    filteredData.sort((a, b) => new Date(a.date) - new Date(b.date));
                    break;
                case 'priority':
                    const priorityOrder = { 'critical': 1, 'urgent': 2, 'normal': 3 };
                    filteredData.sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority]);
                    break;
            }
            
            totalItems = filteredData.length;
            renderTable();
            renderPagination();
        }
    
        // 处理图片上传预览
        function handleImageUpload(event) {
            const files = event.target.files;
            imagePreviewContainer.innerHTML = '';
            
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (!file.type.match('image.*')) continue;
                
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    const imageItem = document.createElement('div');
                    imageItem.className = 'image-item';
                    imageItem.innerHTML = `<img src="${e.target.result}" alt="报修图片预览">`;
                    imagePreviewContainer.appendChild(imageItem);
                };
                
                reader.readAsDataURL(file);
            }
        }
    
        // 处理报修表单提交
        // 供外部调用的创建报修单函数
window.createRepairTicket = function(repairData) {
    const newRepair = {
        id: 'REP' + new Date().getTime(),
        title: repairData.title,
        resident: repairData.username + ' (' + repairData.address + ')',
        type: repairData.type === 'water' ? '水电维修' : repairData.type === 'elevator' ? '电梯故障' : repairData.type === 'public' ? '公共设施' : repairData.type === 'security' ? '安防系统' : '其他',
        date: new Date().toLocaleString(),
        status: 'pending',
        priority: repairData.priority || 'normal',
        location: repairData.location === 'building1' ? '1号楼' : repairData.location === 'building2' ? '2号楼' : repairData.location === 'building3' ? '3号楼' : repairData.location === 'public_area' ? '公共区域' : '地下车库',
        username: repairData.username,
        phone: repairData.phone,
        address: repairData.address,
        description: repairData.description
    };

    repairData.unshift(newRepair);
    currentPage = 1;
    applyFilters();
    updateStatistics();
    return newRepair;
}

function handleRepairSubmit(event) {
    event.preventDefault();
            
            // 获取表单数据
            const formData = {
                title: document.getElementById('repair-title').value,
                type: document.getElementById('repair-type').value,
                location: document.getElementById('repair-location').value,
                priority: document.getElementById('repair-priority').value,
                username: document.getElementById('repair-username').value,
                phone: document.getElementById('repair-phone').value,
                address: document.getElementById('repair-address').value,
                description: document.getElementById('repair-description').value,
                images: document.getElementById('repair-images').files
            };
            
            // 这里可以添加表单验证逻辑
            
            // 模拟提交成功
            alert('报修单提交成功！');
            
            // 重置表单
            repairForm.reset();
            imagePreviewContainer.innerHTML = '';
            
            // 切换到报修列表
            showTab('repair-list');
            
            // 检查是否为编辑模式
            const repairId = document.getElementById('repair-id')?.value;
            
            if (repairId) {
                // 编辑现有报修单
                const index = repairData.findIndex(item => item.id === repairId);
                if (index !== -1) {
                    repairData[index] = {
                        ...repairData[index],
                        title: formData.title,
                        resident: formData.username + ' (' + formData.address + ')',
                        type: formData.type === 'water' ? '水电维修' : formData.type === 'elevator' ? '电梯故障' : formData.type === 'public' ? '公共设施' : formData.type === 'security' ? '安防系统' : '其他',
                        priority: formData.priority,
                        location: formData.location === 'building1' ? '1号楼' : formData.location === 'building2' ? '2号楼' : formData.location === 'building3' ? '3号楼' : formData.location === 'public_area' ? '公共区域' : '地下车库',
                        username: formData.username,
                        phone: formData.phone,
                        address: formData.address,
                        description: formData.description
                    };
                }
            } else {
                // 创建新报修单对象
                const newRepair = {
                    id: 'REP' + new Date().getTime(),
                    title: formData.title,
                    resident: formData.username + ' (' + formData.address + ')',
                    type: formData.type === 'water' ? '水电维修' : formData.type === 'elevator' ? '电梯故障' : formData.type === 'public' ? '公共设施' : formData.type === 'security' ? '安防系统' : '其他',
                    date: new Date().toLocaleString(),
                    status: 'pending',
                    priority: formData.priority,
                    location: formData.location === 'building1' ? '1号楼' : formData.location === 'building2' ? '2号楼' : formData.location === 'building3' ? '3号楼' : formData.location === 'public_area' ? '公共区域' : '地下车库',
                    username: formData.username,
                    phone: formData.phone,
                    address: formData.address,
                    description: formData.description
                };

                // 添加到数据源
                repairData.unshift(newRepair);
            }

            // 刷新列表数据
            currentPage = 1;
            applyFilters();

            // 更新统计数据
            updateStatistics();
        }
    
        // 更新统计分析数据
function updateStatistics() {
    const timeRange = statsTimeRange.value;
    let filteredStatsData = [];
    let timeRangeLabel = '';
    
    const now = new Date();
    const currentYear = now.getFullYear();
    const currentMonth = now.getMonth();
    
    // 根据时间范围筛选数据
    switch(timeRange) {
        case 'month':
            // 本月数据
            filteredStatsData = repairData.filter(item => {
                const itemDate = new Date(item.date);
                return itemDate.getMonth() === currentMonth && itemDate.getFullYear() === currentYear;
            });
            timeRangeLabel = '本月';
            break;
            
        case 'quarter':
            // 本季度数据
            const currentQuarter = Math.floor(currentMonth / 3);
            const quarterStartMonth = currentQuarter * 3;
            const quarterEndMonth = quarterStartMonth + 2;
            
            filteredStatsData = repairData.filter(item => {
                const itemDate = new Date(item.date);
                const itemQuarter = Math.floor(itemDate.getMonth() / 3);
                return itemQuarter === currentQuarter && itemDate.getFullYear() === currentYear;
            });
            timeRangeLabel = '本季度';
            break;
            
        case 'year':
            // 本年度数据
            filteredStatsData = repairData.filter(item => {
                const itemDate = new Date(item.date);
                return itemDate.getFullYear() === currentYear;
            });
            timeRangeLabel = '本年度';
            break;
            
        case 'custom':
            // 自定义时间范围
            if (startDateInput.value && endDateInput.value) {
                const startDate = new Date(startDateInput.value);
                const endDate = new Date(endDateInput.value);
                
                filteredStatsData = repairData.filter(item => {
                    const itemDate = new Date(item.date);
                    return itemDate >= startDate && itemDate <= endDate;
                });
                
                timeRangeLabel = `${formatDate(startDate)} 至 ${formatDate(endDate)}`;
            } else {
                // 如果没有选择日期范围，默认显示最近30天
                const endDate = new Date();
                const startDate = new Date();
                startDate.setDate(endDate.getDate() - 30);
                
                filteredStatsData = repairData.filter(item => {
                    const itemDate = new Date(item.date);
                    return itemDate >= startDate && itemDate <= endDate;
                });
                
                timeRangeLabel = `${formatDate(startDate)} 至 ${formatDate(endDate)}`;
            }
            break;
    }
    
    // 更新统计卡片数据
    const totalRepairs = filteredStatsData.length;
    const completedRepairs = filteredStatsData.filter(item => item.status === 'completed').length;
    const processingRepairs = filteredStatsData.filter(item => item.status === 'processing').length;
    const pendingRepairs = filteredStatsData.filter(item => item.status === 'pending').length;
    
    // 更新增强版统计卡片
    updateEnhancedStatsCards(totalRepairs, completedRepairs, processingRepairs, pendingRepairs, timeRangeLabel);
    
    // 更新处理效率数据
    updateEfficiencyStats(filteredStatsData);
}

// 更新增强版统计卡片
function updateEnhancedStatsCards(total, completed, processing, pending, timeRangeLabel) {
    // 更新总数卡片
    animateValueEnhanced('total-repairs-enhanced', total);
    document.getElementById('total-period-label').textContent = timeRangeLabel;
    
    // 更新已完成卡片
    animateValueEnhanced('completed-repairs-enhanced', completed);
    document.getElementById('completed-period-label').textContent = timeRangeLabel;
    
    // 更新处理中卡片
    animateValueEnhanced('processing-repairs-enhanced', processing);
    document.getElementById('processing-period-label').textContent = timeRangeLabel;
    
    // 更新待处理卡片
    animateValueEnhanced('pending-repairs-enhanced', pending);
    document.getElementById('pending-period-label').textContent = timeRangeLabel;
    
    // 计算变化百分比（模拟数据）
    const totalChange = Math.floor(Math.random() * 20) - 5; // -5% 到 +15%
    const completedChange = Math.floor(Math.random() * 15) + 5; // +5% 到 +20%
    const processingChange = Math.floor(Math.random() * 10) - 10; // -10% 到 0%
    const pendingChange = Math.floor(Math.random() * 10) - 15; // -15% 到 -5%
    
    // 更新变化百分比显示
    updateChangeIndicator('total-change', totalChange);
    updateChangeIndicator('completed-change', completedChange);
    updateChangeIndicator('processing-change', processingChange);
    updateChangeIndicator('pending-change', pendingChange);
    
    // 更新日期范围显示
    const now = new Date();
    let startDate, endDate;
    
    switch(statsTimeRange.value) {
        case 'month':
            startDate = new Date(now.getFullYear(), now.getMonth(), 1);
            endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
            break;
        case 'quarter':
            const quarter = Math.floor(now.getMonth() / 3);
            startDate = new Date(now.getFullYear(), quarter * 3, 1);
            endDate = new Date(now.getFullYear(), (quarter + 1) * 3, 0);
            break;
        case 'year':
            startDate = new Date(now.getFullYear(), 0, 1);
            endDate = new Date(now.getFullYear(), 11, 31);
            break;
        case 'custom':
            if (startDateInput.value && endDateInput.value) {
                startDate = new Date(startDateInput.value);
                endDate = new Date(endDateInput.value);
            } else {
                // 默认最近30天
                endDate = new Date();
                startDate = new Date();
                startDate.setDate(endDate.getDate() - 30);
            }
            break;
    }
    
    const dateRangeStr = `${formatDate(startDate)} 至 ${formatDate(endDate)}`;
    document.getElementById('total-range').textContent = dateRangeStr;
    document.getElementById('completed-range').textContent = dateRangeStr;
    document.getElementById('processing-range').textContent = dateRangeStr;
    document.getElementById('pending-range').textContent = dateRangeStr;
}

// 更新变化指示器
function updateChangeIndicator(elementId, changePercent) {
    const element = document.getElementById(elementId);
    const parent = element.parentElement;
    
    element.textContent = `${Math.abs(changePercent)}%`;
    
    // 移除现有类
    parent.classList.remove('positive', 'negative');
    
    if (changePercent > 0) {
        parent.classList.add('positive');
        parent.querySelector('i').className = 'fas fa-arrow-up';
    } else {
        parent.classList.add('negative');
        parent.querySelector('i').className = 'fas fa-arrow-down';
    }
}

// 增强版数字动画效果
function animateValueEnhanced(id, endValue) {
    const element = document.getElementById(id);
    const startValue = parseInt(element.textContent) || 0;
    const duration = 800;
    let startTimestamp = null;
    
    const step = (timestamp) => {
        if (!startTimestamp) startTimestamp = timestamp;
        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
        const value = Math.floor(progress * (endValue - startValue) + startValue);
        element.textContent = value;
        
        // 添加动画类
        element.classList.add('counting');
        
        if (progress < 1) {
            window.requestAnimationFrame(step);
        } else {
            // 动画完成后移除类
            setTimeout(() => {
                element.classList.remove('counting');
            }, 300);
        }
    };
    
    window.requestAnimationFrame(step);
}

// 格式化日期为 YYYY-MM-DD
function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

// 更新处理效率统计数据
function updateEfficiencyStats(data) {
    // 计算平均响应时间、平均处理时间和按时完成率
    const completedRepairs = data.filter(item => item.status === 'completed');
    
    let avgResponseTime = 0;
    let avgRepairTime = 0;
    let onTimeRate = 0;
    
    if (completedRepairs.length > 0) {
        // 模拟计算平均响应时间（1-6小时）
        avgResponseTime = 2 + Math.random() * 4;
        
        // 模拟计算平均处理时间（4-48小时）
        avgRepairTime = 12 + Math.random() * 36;
        
        // 模拟计算按时完成率（80%-98%）
        onTimeRate = 80 + Math.random() * 18;
        
        // 根据优先级调整模拟数据
        const urgentRepairs = completedRepairs.filter(item => item.priority === 'urgent' || item.priority === 'critical');
        if (urgentRepairs.length > 0) {
            avgResponseTime = Math.min(avgResponseTime, 2 + Math.random() * 2);
            avgRepairTime = Math.min(avgRepairTime, 6 + Math.random() * 12);
        }
    }
    
    // 更新UI
    animateValue('avg-response-time', 0, avgResponseTime, 1000, 'h');
    animateValue('avg-repair-time', 0, avgRepairTime, 1000, 'h');
    animateValue('on-time-rate', 0, onTimeRate, 1000, '%');
    
    // 模拟变化百分比
    const responseTimeChange = -5 - Math.random() * 10;
    const repairTimeChange = -3 - Math.random() * 8;
    const onTimeChange = 2 + Math.random() * 6;
    
    document.getElementById('response-time-change').innerHTML = `与上月相比 <span style="color: ${responseTimeChange < 0 ? 'var(--success-color)' : 'var(--danger-color)'}">${responseTimeChange < 0 ? '↓' : '↑'}${Math.abs(responseTimeChange).toFixed(0)}%</span>`;
    document.getElementById('repair-time-change').innerHTML = `与上月相比 <span style="color: ${repairTimeChange < 0 ? 'var(--success-color)' : 'var(--danger-color)'}">${repairTimeChange < 0 ? '↓' : '↑'}${Math.abs(repairTimeChange).toFixed(0)}%</span>`;
    document.getElementById('on-time-change').innerHTML = `与上月相比 <span style="color: ${onTimeChange > 0 ? 'var(--success-color)' : 'var(--danger-color)'}">${onTimeChange > 0 ? '↑' : '↓'}${Math.abs(onTimeChange).toFixed(0)}%</span>`;
}

// 数字动画效果，支持单位
function animateValue(id, start, end, duration, unit = '') {
    const obj = document.getElementById(id);
    let startTimestamp = null;
    const step = (timestamp) => {
        if (!startTimestamp) startTimestamp = timestamp;
        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
        const value = progress * (end - start) + start;
        obj.innerHTML = value < 10 ? value.toFixed(1) + unit : Math.floor(value) + unit;
        if (progress < 1) {
            window.requestAnimationFrame(step);
        }
    };
    window.requestAnimationFrame(step);
}
    
        // 设置选项卡切换功能
        function setupTabSwitching() {
            document.getElementById('list-tab-link').addEventListener('click', function(e) {
                e.preventDefault();
                showTab('repair-list');
            });
            
            document.getElementById('add-tab-link').addEventListener('click', function(e) {
                e.preventDefault();
                showTab('repair-add');
            });
            
            document.getElementById('stats-tab-link').addEventListener('click', function(e) {
                e.preventDefault();
                showTab('repair-statistics');
                // 切换到统计分析时刷新数据
                updateStatistics();
            });
            
            document.getElementById('back-to-list').addEventListener('click', function() {
                showTab('repair-list');
            });
            
            // 查看详情按钮
            document.querySelectorAll('.btn-sm').forEach(button => {
                button.addEventListener('click', function() {
                    if(this.querySelector('.fa-eye')) {
                        showTab('repair-detail');
                    }
                });
            });
            
            // 模拟一些交互效果
            document.querySelectorAll('.table tr').forEach(row => {
                row.addEventListener('click', function(e) {
                    if(!e.target.closest('button')) {
                        showTab('repair-detail');
                    }
                });
            });
        }
    
        // 显示指定选项卡
        function showTab(tabId) {
            // 隐藏所有选项卡内容
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 显示选中的选项卡
            document.getElementById(tabId).classList.add('active');
            
            // 更新侧边栏活动状态
            document.querySelectorAll('.sidebar-menu a').forEach(link => {
                link.classList.remove('active');
            });
            
            if(tabId === 'repair-list') {
                document.querySelector('#list-tab-link').classList.add('active');
            } else if(tabId === 'repair-add') {
                document.querySelector('#add-tab-link').classList.add('active');
            } else if(tabId === 'repair-statistics') {
                document.querySelector('#stats-tab-link').classList.add('active');
            }
        }
        
        // 显示报修详情
        function showDetails(repairId) {
            const repair = repairData.find(item => item.id === repairId);
            if (!repair) return;
            
            document.getElementById('repair-detail').innerHTML = `
                <div class="card">
                    <div class="card-header">
                        <h2><i class="fas fa-tools"></i> 报修工单详情</h2>
                        <button class="btn btn-outline" onclick="showTab('repair-list')">
                            <i class="fas fa-arrow-left"></i> 返回列表
                        </button>
                    </div>
                    
                    <div class="repair-details">
                        <div>
                            <div class="detail-card">
                                <h3>基本信息</h3>
                                <div class="detail-item">
                                    <div class="detail-label">报修单号:</div>
                                    <div class="detail-value">${repair.id}</div>
                                </div>
                                <div class="detail-item">
                                    <div class="detail-label">报修标题:</div>
                                    <div class="detail-value">${repair.title}</div>
                                </div>
                                <div class="detail-item">
                                    <div class="detail-label">报修类型:</div>
                                    <div class="detail-value">${repair.type}</div>
                                </div>
                                <div class="detail-item">
                                    <div class="detail-label">报修位置:</div>
                                    <div class="detail-value">${repair.location}</div>
                                </div>
                                <div class="detail-item">
                                    <div class="detail-label">优先级:</div>
                                    <div class="detail-value">${repair.priority}</div>
                                </div>
                            </div>
                            
                            <div class="detail-card">
                                <h3>报修人信息</h3>
                                <div class="detail-item">
                                    <div class="detail-label">报修人:</div>
                                    <div class="detail-value">${repair.username}</div>
                                </div>
                                <div class="detail-item">
                                    <div class="detail-label">联系电话:</div>
                                    <div class="detail-value">${repair.phone}</div>
                                </div>
                                <div class="detail-item">
                                    <div class="detail-label">详细地址:</div>
                                    <div class="detail-value">${repair.address}</div>
                                </div>
                                <div class="detail-item">
                                    <div class="detail-label">提交时间:</div>
                                    <div class="detail-value">${repair.date}</div>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <div class="detail-card">
                                <h3>问题描述</h3>
                                <p>${repair.description}</p>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            showTab('repair-detail');
        }
        
        // 显示编辑表单
        function showEdit(repairId) {
            const repair = repairData.find(item => item.id === repairId);
            if (!repair) return;
            
            document.getElementById('repair-add').innerHTML = `
                <div class="card">
                    <div class="card-header">
                        <h2><i class="fas fa-edit"></i> 编辑报修单</h2>
                        <button class="btn btn-outline" onclick="showTab('repair-list')">
                            <i class="fas fa-arrow-left"></i> 返回列表
                        </button>
                    </div>
                    
                    <form id="repair-form">
                        <div class="repair-details">
                            <div>
                                <div class="form-group">
                                    <label for="repair-title">报修标题 *</label>
                                    <input type="text" id="repair-title" class="form-control" placeholder="简要描述报修问题" value="${repair.title}" required>
                                </div>
                                
                                <div class="form-group">
                                    <label for="repair-type">报修类型 *</label>
                                    <select id="repair-type" class="form-control" required>
                                        <option value="">请选择报修类型</option>
                                        <option value="water" ${repair.type === 'water' ? 'selected' : ''}>水电维修</option>
                                        <option value="elevator" ${repair.type === 'elevator' ? 'selected' : ''}>电梯故障</option>
                                        <option value="public" ${repair.type === 'public' ? 'selected' : ''}>公共设施</option>
                                        <option value="security" ${repair.type === 'security' ? 'selected' : ''}>安防系统</option>
                                        <option value="other" ${repair.type === 'other' ? 'selected' : ''}>其他</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label for="repair-location">报修位置 *</label>
                                    <select id="repair-location" class="form-control" required>
                                        <option value="">请选择位置</option>
                                        <option value="building1" ${repair.location === 'building1' ? 'selected' : ''}>1号楼</option>
                                        <option value="building2" ${repair.location === 'building2' ? 'selected' : ''}>2号楼</option>
                                        <option value="building3" ${repair.location === 'building3' ? 'selected' : ''}>3号楼</option>
                                        <option value="public_area" ${repair.location === 'public_area' ? 'selected' : ''}>公共区域</option>
                                        <option value="underground" ${repair.location === 'underground' ? 'selected' : ''}>地下车库</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label for="repair-priority">优先级</label>
                                    <select id="repair-priority" class="form-control">
                                        <option value="normal" ${repair.priority === 'normal' ? 'selected' : ''}>一般</option>
                                        <option value="urgent" ${repair.priority === 'urgent' ? 'selected' : ''}>紧急</option>
                                        <option value="critical" ${repair.priority === 'critical' ? 'selected' : ''}>严重</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div>
                                <div class="form-group">
                                    <label for="repair-username">报修人 *</label>
                                    <input type="text" id="repair-username" class="form-control" placeholder="请输入姓名" value="${repair.username}" required>
                                </div>
                                
                                <div class="form-group">
                                    <label for="repair-phone">联系电话 *</label>
                                    <input type="tel" id="repair-phone" class="form-control" placeholder="请输入手机号码" value="${repair.phone}" required>
                                </div>
                                
                                <div class="form-group">
                                    <label for="repair-address">详细地址</label>
                                    <input type="text" id="repair-address" class="form-control" placeholder="例如：A栋502室" value="${repair.address}">
                                </div>
                                
                                <div class="form-group">
                                    <label for="repair-images">上传图片</label>
                                    <input type="file" id="repair-images" class="form-control" multiple>
                                    <div class="image-preview" id="image-preview-container">
                                        <!-- 图片预览将在这里动态添加 -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="repair-description">问题描述 *</label>
                            <textarea id="repair-description" class="form-control" placeholder="请详细描述报修问题..." required>${repair.description}</textarea>
                        </div>
                        
                        <div style="text-align: right; margin-top: 20px;">
                            <button type="reset" class="btn btn-outline">重置</button>
                            <button type="submit" class="btn btn-success">保存修改</button>
                        </div>
                    </form>
                </div>
            `;
            showTab('repair-add');
        }
    </script>
    </body>
    </html>